<template>
  <div class="container">
    <h3>请求地址切换器</h3>
    
    <div class="env-list">
      <div 
        v-for="(env, index) in environments" 
        :key="index"
        class="env-item"
        :class="{ active: currentEnvIndex === index }"
        @click="switchEnv(index)"
      >
        <span class="env-name">{{ env.name }}</span>
        <div class="env-details">
          <div class="env-url">
            <span>原地址:</span> {{ env.source }}
          </div>
          <div class="env-url">
            <span>目标地址:</span> {{ env.target }}
          </div>
        </div>
      </div>
    </div>
    
    <div class="actions">
      <button @click="toggleEditMode">
        {{ editMode ? '保存配置' : '编辑配置' }}
      </button>
    </div>
    
    <div v-if="editMode" class="edit-section">
      <h4>编辑环境</h4>
      <div v-for="(env, index) in environments" :key="index" class="env-editor">
        <input 
          v-model="env.name" 
          placeholder="环境名称"
          class="env-input"
        >
        <input 
          v-model="env.source" 
          placeholder="原始地址"
          class="env-input"
        >
        <input 
          v-model="env.target" 
          placeholder="目标地址"
          class="env-input"
        >
        <button @click="removeEnv(index)" class="remove-btn">删除</button>
      </div>
      <button @click="addEnv" class="add-btn">添加环境</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      environments: [],
      currentEnvIndex: 0,
      editMode: false
    };
  },
  mounted() {
    // 从存储加载数据
    chrome.storage.local.get(['environments', 'currentEnvIndex'], (result) => {
      this.environments = result.environments || [
        { name: '开发环境', source: 'https://api.example.com', target: 'http://dev.api.example.com' },
        { name: '测试环境', source: 'https://api.example.com', target: 'http://test.api.example.com' },
        { name: '生产环境', source: 'https://api.example.com', target: 'https://api.example.com' }
      ];
      this.currentEnvIndex = result.currentEnvIndex !== undefined ? result.currentEnvIndex : 0;
    });
  },
  methods: {
    switchEnv(index) {
      if (this.editMode) return;
      
      this.currentEnvIndex = index;
      // 保存当前选择
      chrome.storage.local.set({ currentEnvIndex: index });
      // 通知背景页切换环境
      chrome.runtime.sendMessage(
        { action: 'switchEnv', index },
        (response) => {
          if (response.success) {
            console.log('环境切换成功');
          }
        }
      );
    },
    toggleEditMode() {
      if (this.editMode) {
        // 保存配置
        chrome.storage.local.set({ environments: this.environments });
        // 通知背景页更新规则
        chrome.runtime.sendMessage(
          { action: 'updateEnvironments', environments: this.environments },
          (response) => {
            if (response.success) {
              console.log('环境配置更新成功');
            }
          }
        );
      }
      this.editMode = !this.editMode;
    },
    addEnv() {
      this.environments.push({
        name: '新环境',
        source: 'https://api.example.com',
        target: 'https://new.api.example.com'
      });
    },
    removeEnv(index) {
      if (this.environments.length <= 1) {
        alert('至少保留一个环境');
        return;
      }
      this.environments.splice(index, 1);
      // 如果删除了当前选中的环境，自动切换到第一个
      if (this.currentEnvIndex === index) {
        this.currentEnvIndex = 0;
        chrome.storage.local.set({ currentEnvIndex: 0 });
      } else if (this.currentEnvIndex > index) {
        this.currentEnvIndex--;
        chrome.storage.local.set({ currentEnvIndex: this.currentEnvIndex });
      }
    }
  }
};
</script>

<style>
.container {
  width: 400px;
  padding: 15px;
  font-family: Arial, sans-serif;
}

h3 {
  margin: 0 0 15px 0;
  text-align: center;
  color: #333;
}

.env-list {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.env-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.env-item:last-child {
  border-bottom: none;
}

.env-item:hover {
  background-color: #f5f5f5;
}

.env-item.active {
  background-color: #e3f2fd;
  border-left: 3px solid #2196f3;
}

.env-name {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #2196f3;
}

.env-details {
  font-size: 12px;
  color: #666;
}

.env-url {
  margin-bottom: 3px;
}

.env-url span {
  color: #999;
}

.actions {
  text-align: center;
  margin-bottom: 15px;
}

button {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #1976d2;
}

.edit-section {
  border-top: 1px dashed #ccc;
  padding-top: 15px;
}

h4 {
  margin: 0 0 10px 0;
  color: #555;
}

.env-editor {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  align-items: center;
}

.env-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
}

.remove-btn {
  background-color: #f44336;
  padding: 5px 10px;
  font-size: 12px;
}

.remove-btn:hover {
  background-color: #d32f2f;
}

.add-btn {
  background-color: #4caf50;
  margin-top: 10px;
}

.add-btn:hover {
  background-color: #388e3c;
}
</style>
